<template>
	<uni-drawer ref="condition" mode="right">
		<view class="page">
			<view class="page-body form" v-if="conditionData.length > 0">
				<uni-status-bar />
				<view class="form-group">
					<block v-for="(item, index) in conditionData" :key="index">
						<view class="form-item" :class="{'form-item-ver': item.type == 'cals'}">
							<view class="form-item-header">{{item.label}}<text v-if="item.label">：</text></view>
							<view class="form-item-body" v-if="item.type == 'select'">
								<picker :value="item.index" :range="item.options" range-key="dict_label" @change="bindPickerChange($event, item.field)">
									<view class="select">
										<view class="select-selected">
											<text class="select-selected-label">{{ item.value | getDictLabel(item.options, 'dict_value') || '请选择' }}</text>
										</view>
										<view class="select-btn">
											<uni-icons class="icon" type="arrowdown" font-family="iconfont" size="15"
												color="#a9a9a9">
											</uni-icons>
										</view>
									</view>
								</picker>
							</view>
							<view class="form-item-body" v-else-if="item.type == 'cals'">
								<uni-datetime-picker v-model="item.value" type="daterange">
									<view class="cals">
										<view class="cals-group">
											<view class="cals-item">
												<view class="cals-item-left">
													<text class="cals-item-left-label">{{ item.value[0] || '开始时间' }}</text>
												</view>
												<view class="cals-item-right">
													<image class="icon" mode="aspectFit" src="@/static/icon/icon-cal.png">
													</image>
												</view>
											</view>
											<view class="cals-sign"></view>
											<view class="cals-item">
												<view class="cals-item-left">
													<text class="cals-item-left-label">{{ item.value[1] || '结束时间' }}</text>
												</view>
												<view class="cals-item-right">
													<image class="icon" mode="aspectFit" src="@/static/icon/icon-cal.png">
													</image>
												</view>
											</view>
										</view> 
									</view>
								</uni-datetime-picker>
							</view>
							<view class="form-item-body" v-else>
								<input class="form-control" type="text" v-model="item.value" placeholder="请输入" />
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="page-footer btns">
				<view class="btns-group">
					<view class="btns-item">
						<button class="btns-btn" @tap="reset">
							<text class="btns-label">重置</text>
						</button>
					</view>
					<view class="btns-item">
						<button class="btns-btn" @tap="submit">
							<text class="btns-label">查询</text>
						</button>
					</view>
				</view>
			</view>
		</view>
	</uni-drawer>
</template>

<script>
	import { getDicts, getMediaType } from '@/api/configure.js';
	import {deepClone, mergeUrls, getUserInfo, formatDateStr, cleanData} from '@/util/util.js';
	import configUrl from '@/util/url.js';

	export default {
		props: {
			condition: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				conditionData: []
			}
		},
		methods: {
			getConditionData(res) {
				this.conditionData = deepClone(res);
			},
			open() {
				this.$refs.condition.open();
			},
			close() {
				this.$refs.condition.close();
			},
			async getMediaType(obj) {
				let params = {
					parentid: obj.value
				};
				
				if(obj.targetField == 'mediaTypeLv2'){
					params.level = 2;
				} else {
					params.level = 3;
				}
				
				let {code, data} = await getMediaType(params);
				
				let targetField = this.conditionData.find(item => item.field == obj.targetField);
				
				targetField.options = data.map( option => ({dict_label: option.name, dict_value: option.id}));
				
			},
			async clearPicker(targetField){
				let target = this.conditionData.find(select => select.field == targetField);
				
				
				target.value = null;
				target.index = null;
				
				target.options = [];
				
				if(target.targetField){
					this.clearPicker(target.targetField);
				}
			},
			bindPickerChange(e, field){
				let index = e.detail.value ;
				let select = this.conditionData.find(item => item.field == field);
				
				select.index = index;
				select.value = select.options[index]['dict_value'];
				
				if(select.targetField){
					this.clearPicker(select.targetField);
				}
				
				if(select.field == 'mediaTypeLv1' || select.field == 'mediaTypeLv2'){
					this.getMediaType(select);
				}
			},
			bindDateChange(e, field, type) {
				let cal = this.conditionData.find(item => item.field == field);
				
				let date = e.target.value;
				
				if(type == 'begin'){
					cal.beginDate = date;
				} else if(type == 'end') {
					cal.endDate = date;
				} else {
					
				}
			},
			maskClick() {},
			reset(){
				this.conditionData.forEach(item => {
					if(item.type == 'cals') {
						item.value = [];
					} else if(item.type == 'select') {
						item.value = '';
						item.index = '';
					} else {
						item.value = '';
					}
				})
			},
			submit() {
				let params = deepClone(this.conditionData);
				
				this.$emit('changeParams', params);
			},
			init() {}
		},
		watch: {
			condition: {
				handler(val, oldVal) {
					this.getConditionData(val)
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			this.init();
		},
		mounted() {}
	}
</script>

<style>
	.page{
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
	}
	.form {}

	.form-group {
		padding-top: 16px;
	}

	.form-item {
		margin-bottom: 12px;
		padding: 0px 16px;
		display: flex;
		flex-direction: row;
		align-item: center;
	}

	.form-item-ver {
		flex-direction: column;
	}

	.form-item-header {
		min-width: 140rpx;
		height: 25px;
		padding: 3px 0rpx;
		font-size: 14px;
		line-height: 17px;
		box-sizing: border-box;
	}

	.form-item-body {
		flex: 1;
	}

	.cals {}

	.cals-group {
		display: flex;
		justify-content: center;
		flex-direction: row;
	}

	.cals-item {
		flex: 1;
		border: 1px solid #d7d7d7;
		border-radius: 2px;
		background-color: #ffffff;
		position: relative;
		top: 0px;
		left: 0px;

	}

	.cals-item-left {
		padding: 4px 3px;
		padding-right: 23px;
		line-height: 15px;
	}
	
	.cals-item-left-label{
		font-size: 12px;
	}
	
	.cals-item-right {
		width: 23px;
		height: 23px;
		position: absolute;
		top: 0px;
		right: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.icon {
		width: 12px;
		height: 12px;
	}

	.cals-sign {
		margin: 11px 3px;
		width: 12px;
		height: 1px;
		background-color: #c6c6c8;
	}

	.form-control {
		height: 25px;
		padding: 2px 3px;
		border: 1rpx solid #d7d7d7;
		border-radius: 2px;
		font-size: 12px;
		line-height: 15px;
		background-color: #ffffff;
		box-sizing: border-box;
	}

	.select {
		border: 1rpx solid #d7d7d7;
		border-radius: 2px;
		background-color: #ffffff;
		position: relative;
		top: 0rpx;
		left: 0rpx;
	}

	.select-selected {
		padding: 4px 3px;
		padding-right: 23px;
		font-size: 12px;
		line-height: 15px;
		height: 23px;
		box-sizing: border-box;
	}

	.select-selected-label {
		font-size: 12px;
		line-height: 15px;
		box-sizing: border-box;
	}

	.select-btn {
		width: 23px;
		height: 23px;
		position: absolute;
		top: 0px;
		right: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.page-footer{
		
	} 
	.btns{
		
	}
	.btns-group{
		display: flex;
		flex-direction: row;
	}
	.btns-item{
		padding: 0px 18px;
		width: 49.999%;
	}
	.btns-btn{
		padding: 4px 0px;
		height: 26px;
		font-size: 15px;
		line-height: 18px;
		background: none;
		border-radius: 26px;
		background-image: linear-gradient(to bottom right, #45b3ee, #3a8ded);
	}
	.btns-label{
		font-size: 15px;
		line-height: 18px;
		color: #ffffff;
	}
</style>
